<div class="layui-fluid" id="app-vue" lay-title="图片列表">
    <div class="layui-card">
        <div class="custom-header">
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button type="primary"  @click="handleCreate({})"><i class="el-icon-plus"></i>新增图片</el-button>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-inline nepadmin-mar-r30">
                            <el-radio-group v-model="listQuery.type" fill="#5a8bff" @change="_initData(true)" >
                                <el-radio-button :label="item.value" v-for="(item,index) in image_list" :key="index">{{item.name}}</el-radio-button>

                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </div>
            <div class="custom-header-show">
                <div class="custom-header-left display-flex">
                    <div class="layui-inline nepadmin-mar-r30">
                        <el-button size="small" type="danger"  @click="handleTableCheckboxDelete('/admin/goods/imageModel_dels')">批量删除</el-button>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-card-body" >
            <el-table :data="tableData" v-loading="table_loading" border stripe  height="calc(100vh - 320px)" @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column label="ID" prop="id" width="50"></el-table-column>
                <el-table-column label="图片" prop="image" align="center" width="120">
                    <template slot-scope="scope">
                        <el-image style="width: 35px; height: 35px" :src="scope.row.img" fit="fit"  :preview-src-list="[scope.row.img]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="图片名称" prop="name"  min-width="220">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row" prop="name" url='/admin/system/imageModel_modInfo'/>
                    </template>
                </el-table-column>

                <el-table-column label="url" prop="url" show-overflow-tooltip  min-width="200">
                    <template slot-scope="scope">
                        <my-el-table-column :row="scope.row" prop="url" url='/admin/system/imageModel_modInfo'/>
                    </template>
                </el-table-column>

                <el-table-column label="状态" prop="status_name" align="center" width="100">
                    <template slot-scope="scope">
                        <my-switch-status
                                url='/admin/system/imageModel_modInfo'
                                :item="scope.row"
                        />

                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="120">
                    <template slot-scope="scope">
                        <my-el-table-column input-type="number" :row="scope.row" prop="sort" url='/admin/system/imageModel_modInfo'/>
                    </template>
                </el-table-column>
                <el-table-column label="更新日期" prop="update_time" align="center" width="150"> </el-table-column>
                <el-table-column label="操作"  fixed="right" align="center" min-width="200">
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handleCreate( scope.row)">编辑</el-button>
                        <my-btn-del
                                url='/admin/system/imageModel_del'
                                :id="scope.row.id"
                                :fnc="()=>tableData.splice(scope.$index,1)"
                        />
                    </template>
                </el-table-column>

            </el-table>


            <div class="page-container display-flex">
                <el-pagination  @current-change="handlePageChange" @size-change="handlePageSizeChange"  :total="total" />
            </div>
        </div>
    </div>

    <create-image ref="createImage" />

</div>

<script>

    layui.extend({
        createImage: 'views/system/components/createImage',
    }).use(['admin', 'conf','view', 'jquery','createImage','mySwitchStatus','myBtnDel','mixinsTableCheckbox'], function (admin, conf,view,$,createImage,mySwitchStatus,myBtnDel,mixinsTableCheckbox) {


        var app = new Vue({
            el: '#app-vue',
            data: {
                table_loading:false,
                total:0,
                tableData: [],
                image_list: [],
                listQuery:{
                    page:1,
                    type:0,
                },
            },
            components:{
                'my-switch-status' : mySwitchStatus,
                'my-btn-del' : myBtnDel,
                "create-image":createImage,
            },
            mixins:[mixinsTableCheckbox],
            created: function() {
                this.getBaseInfo()
                this._initData()
            },
            methods: {
                getBaseInfo:function(){
                    const that = this
                    admin.post({
                        url:'/admin/index/defInfo',
                        data:{type:'image'},
                        success:function(res){
                            const data = res.data||{}
                            that.image_list = data.image_list||[]
                        }
                    })
                },
                _initData:function(is_reset){
                    if(is_reset===true){
                        this.listQuery.page = 1

                    }
                    const that = this
                    //开启table加载效果
                    this.table_loading = true
                    admin.post({
                        url:'/admin/system/imageModel_lists'
                        ,data:this.listQuery
                        ,success: function (res) {
                            that.table_loading = false
                            var data = res.data || {}
                            that.tableData = data.list || []
                            that.total = data.total || 0
                        }
                        ,complete:function(){
                            console.log('complete')
                            that.table_loading = false
                        }
                    })
                },

                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },

                handleCreate:function(item) {
                    this.$refs['createImage'].showDialog(Object.assign(item,{type:this.listQuery.type}),this)

                },
            }
        })
    })

</script>